<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
            *{margin:0;padding:0}
            .title{
            background-color:rgb(252, 133, 158);
            /* color 字体颜色*/
            color:rgb(206, 230, 236);
            /*text-align:left/right/center 设置文本的对其方案*/
            text-align: center;
            /*给文本行高，会将文字撑开，让其在行高中垂直居中*/
            line-height: 80px;
            }
            .zl{
                width:400px;
                height:600px;
                margin-left:auto;
                margin-right: auto;
                background-image:url(images/timg2.jpg);
            }
            .about{
                margin-top:15px;
                color:rgb(116, 24, 236);
                margin-left:20px;
            }
            .photo{
                width:400px;
                height:250px;
            }
            .l1{
                line-height: 50px;
                margin-left: 10px;
                letter-spacing:2px;
            }
            .l2{
                line-height: 50px;
                margin-left: 10px;
                letter-spacing:2px;
            }
            .l3{
                line-height: 50px;
                margin-left: 10px;
                letter-spacing:2px;
            }
            .l4{
                line-height: 50px;
                margin-left: 10px;
                letter-spacing:2px;
            }
            .l5{
                line-height: 50px;
                margin-left: 10px;
                letter-spacing:2px;
            }
            
    </style>
</head>
<body>
    <h1 class="title">个人网站</h1>
    <div class="zl">
        <input type="text">
        <button>百度一下</button>
        <p class="about">|About us|</p>
        <img class="photo" src="images/timg1.jpg" alt="">
        <p class="l1">单纯的信任</p>
        <p class="l2">关于拥抱得心疼</p>
        <p class="l3">关于青春 那件傻事得余震</p>
        <p class="l4">就用这首歌来作证</p>
        <p class="l5">2015 周笔畅 反思青春 温情解读关于 (我们)</p>
        <a href="https://www.baidu.com/">>>百度</a>
        <a href="https://www.taobao.com/">>>淘宝</a>
    </div>

</body>
</html>